UI/UX of App Detox
ali Abbas Zaidi 40024647 Julien Xu - 40095332
The Problem
The evolution of communication systems has provided many benefits over the years. It allowed people to interact on global platforms or
through direct messages from anywhere around the world, including from the comfort of their home. As of right now, it is almost mandatory to
use such devices and software's due to the obligations of social distancing caused by a global pandemic.
However, with or without the pandemic, such technologies have had a dramatic effect on the lifestyle of each individual. A high amount of time
spent in front of a screen regularly can severely impact not only physical health, but mental health as well. The need to use a device can
overlap other basic needs such as eating, exercising and sleeping. This need creates a feeling of always wanting to be “up to date” with events
that are going through social media. Excessive use of social media can then lead to anxiety due the amount of exposure each individual is
letting out. This can have some long-lasting effects on a user’s well-being.
In order to solve all these issues, it is necessary to find a solution to its main source: screen usage. Some applications implement ways to
reduce screen usage such as setting reminders, showing user progress, grayscale, muting notifications, time frames and so on. The problem is,
there aren’t many large scale applications that have the ability to restrict the user’s access to certain apps completely. This leads to users being
able to “cheat” their goals and revert back to their old habits. Also, users will tend to give up after a period of time due to lack of satisfaction
created by the restrictions.
The evolution of communication systems has provided many benefits over the years. It allowed people to interact on global platforms or
through direct messages from anywhere around the world, including from the comfort of their home. As of right now, it is almost mandatory to
use such devices and software's due to the obligations of social distancing caused by a global pandemic.
However, with or without the pandemic, such technologies have had a dramatic effect on the lifestyle of each individual. A high amount of time
spent in front of a screen regularly can severely impact not only physical health, but mental health as well. The need to use a device can
overlap other basic needs such as eating, exercising and sleeping. This need creates a feeling of always wanting to be “up to date” with events
that are going through social media. Excessive use of social media can then lead to anxiety due the amount of exposure each individual is
letting out. This can have some long-lasting effects on a user’s well-being.
In order to solve all these issues, it is necessary to find a solution to its main source: screen usage. Some applications implement ways to
reduce screen usage such as setting reminders, showing user progress, grayscale, muting notifications, time frames and so on. The problem is,
there aren’t many large scale applications that have the ability to restrict the user’s access to certain apps completely. This leads to users being
able to “cheat” their goals and revert back to their old habits. Also, users will tend to give up after a period of time due to lack of satisfaction
created by the restrictions.
With our “super app”, users will be able to be able to accomplish their goals with more incentives. The app will be able to regulate the amount of time spent on every application. If the user exceeds the amount of time he sets, the system will lock the user out of the app until the next cycle. It might be a challenge at first but this is a good way for users to develop better screen habits. If a user achieves his weekly objective, he will be rewarded with a discount of any available retailer of his choice. This creates a good incentive for the user to apply these restrictions because he is left feeling satisfied in the process. They will develop better habits as they complete more and more objectives over time.
Our Solution
The first step in the design process is to better understand the demographic of our targeted audience. According to an article from Springer Link, both preschool children and young adults are at the highest risk for smartphone-related addictive behavior. The design of our application will follow trends such as glassmorphism because it will give a more modern feel for our users.
Research
Persona 1: Jimmy Scott
Persona 2: Jessica Jones
Persona 3: Kevin Sylvester
User Journey
The created personas now help us create a typical user journey for our targeted users. The user journey is meant to show the behavior of our targeted users when failing to resolve the problem. The user starts by realizing his high screen usage, then he tries to apply solutions to improve his habits to then ultimately give up on the process due to frustration or lack of satisfaction.
Story Board
Storyboard showcases our users thoughts but also their actions in a visual way. The storyboard we created is meant to show a success scenario when the user is interacting with our app. It doesn’t show the specific functionalities of the app but it displays the user experience we are trying to achieve with our targeted audience.
The main functionalities of the application are shown on this user flow diagram. Each section highlights a different page within our application.
These sections include the notification system, the scheduled usage, the temporary usage and the emergency mode that are all connected together when the user wishes to use a particular application.
Even if the user surpasses his allocated time, he still has the option to either extend the amount of time or enter “emergency mode” in case of an emergency. This feature allows the user to not feel imprisoned by the restrictions because he still has control over his level of accessibility. Other sections such as the reward system increase the user’s satisfaction when completing the goals he set during the first time setup.
These sections include the notification system, the scheduled usage, the temporary usage and the emergency mode that are all connected together when the user wishes to use a particular application.
Even if the user surpasses his allocated time, he still has the option to either extend the amount of time or enter “emergency mode” in case of an emergency. This feature allows the user to not feel imprisoned by the restrictions because he still has control over his level of accessibility. Other sections such as the reward system increase the user’s satisfaction when completing the goals he set during the first time setup.
Application Concept
Now that we knew how our app would operate, we designed sketches of the most relevant sections of our app. The design was not final but it helped us have a better understanding of the way we wanted our app to look like.
Sketches
Wireframes
Storyboard showcases our users thoughts but also their actions in a visual way. The storyboard we created is meant to show a success scenario when the user is interacting with our app. It doesn’t show the specific functionalities of the app but it displays the user experience we are trying to achieve with our targeted audience.
Color Palette
The colors chosen for the app are warm and calming. We wanted our users to feel a sense of relaxation when using the application for an extensive period of time because our main purpose is to reduce their screen usage. Also, we thought the effects mixed well with the simplistic glassomorphic design of our interface.
Typography
Open Sans is a humanist sans-serif typeface designed by Steve Matteson. It is a font commonly used in web interfaces and mobile applications. We chose this font because of its readability and popularity.
Final Design
Login
Logging in and signing up is an essential part of the onboarding process. Users who are not familiar with the app can easily locate the first time setup button that will lead them to a simple and intuitive interface. The users will then add the apps they wish to monitor by using the “Add Apps” widget and specify the duration and schedule by double tapping each icon. Once the user logs in the app. They will be directed to the main interface which is the dashboard.
App Usage
The first section of the dashboard is the “Usage” section. This section’s main purpose is to let the user know how much time he has spent using his screen. The big sphere gradually changes to darker colours as time expires in order to create a sense of urgency. This will make the user spend his screen time more wisely. By tapping the sphere, the user will be able to track how much he spent for each specific app with the colored bars next to each app. The user can also display the monthly usage for each app as a graph. A positive message will appear if the user is improving his screen usage for a certain app.
Apps
In the app section, the user will be able to easily navigate across each app. Each app icon also possesses a quick indicator (circular bar) to let the user know how much time he has left for that certain app. When tapping an icon, the user will have the choice to either use the app or view the usage. When the user reaches the time limit, the screen will turn gray and there will be a warning popup that suggests an activity for the user. In the event of an emergency, the user can use the “emergency mode” with no questions asked
Goals
The final section of the dashboard is the “Goals” section. The main purpose of this section is to let the user track their progress. This will also let them know how effective the application is. The user can claim their reward at the end of every week if he has accumulated enough extra time. This incentives the user to keep using the app and keep improving his screen habits.
This project was a great learning experience to better understand the design process of modern apps. It also allowed us to exercise our creativity and find solutions to a very common problem in our world due to the pandemic. The main challenge this project has given us was to understand our user base. The responses gathered from our surveys had varied answers for some questions and the sample size may not have been large enough to come to definitive conclusions. With this in mind, this project has given us the tools to start developing more advanced apps in the future.
Conclusion
